//商品操作
$(function () {
    //把allMoney声明为全局变量 
    //这样无论全选还是单个商品小计变化 都可以操作allMoney
    //而总计渲染的数字 总是allMoney
    let allMoney = 0;
    let strflag = true;

    //已进入页面就默认每个商品选了一个
    // $('.itemcontianer>.scitem').each((i, ele) => {
    //     console.log($(ele).find('.xiaoji').text());
    //     let xjMoney = Number($(ele).find('.xiaoji').text());
    //     allMoney += xjMoney;
    // });
    // $('.allmoney').text(allMoney);
    //暂时不要


    let count = 0;
    // 加减
    $('.more').on('click', function () {
        let unitPrice = parseInt($(this).parents('.scitem').find('.unit-price').text());
        let xiaoji = parseInt($(this).parents('.scitem').find('.xiaoji').text());
        let number = $(this).prev().text();
        xiaoji += unitPrice;
        strflag = true;
        number++;
        $(this).parent().parent().next().find('.xiaoji').text(xiaoji);
        $(this).prev().text(number);

        //以下是总计操作
        //当此项商品被勾选时
        //改变数量改变小计的同时也应改变总计
        if ($(this).parents('.scitem').find('.one').prop('checked')) {
            allMoney += unitPrice;
            $('.allmoney').text(allMoney);
        };
    });
    $('.less').on('click', function () {
        let unitPrice = parseInt($(this).parent().parent().prev().children('.unit-price').text());
        let xiaoji = parseInt($(this).parent().parent().next().find('.xiaoji').text());
        let number = $(this).next().text();
        xiaoji -= unitPrice;
        number--;
        number = number <= 1 ? 1 : number;
        xiaoji = number <= 1 ? unitPrice : xiaoji;
        $(this).parent().parent().next().find('.xiaoji').text(xiaoji);
        $(this).next().text(number);

        //以下是总计操作
        //当此项商品被勾选时
        //改变数量改变小计的同时也应改变总计
        if ($(this).parents('.scitem').find('.one').prop('checked')) {
            // console.log(xiaoji > unitPrice, xiaoji, unitPrice);
            if (xiaoji > unitPrice) {
                allMoney -= unitPrice;
            };
            if (xiaoji === unitPrice) {
                if (strflag) {
                    allMoney -= unitPrice;
                    strflag = false;
                }
            }
            $('.allmoney').text(allMoney);
        };
    });


    //全选操作 (全部打勾并计算总价)
    $('#all').on('click', function () {
        let isChecked = $(this).prop('checked');
        if (isChecked) {
            allMoney = 0;
            $('.one').prop('checked', true);
            //全选时 遍历itemcontianer
            //取出每一个scitem的小计值 
            //累加再赋值allmoney的text
            $('.itemcontianer>.scitem').each((i, ele) => {
                let xjMoney = Number($(ele).find('.xiaoji').text());
                allMoney += xjMoney;
            });
            $('.allmoney').text(allMoney);
        } else {
            allMoney = 0;
            $('.one').prop('checked', false);
            $('.allmoney').text(0);
        }
    });


    //商品单独勾选操作
    $('.one').on('click', function () {
        //单个商品被取消勾选时
        //总是取消全选的勾选
        if (!$(this).prop('checked')) {
            $('#all').prop('checked', false)
        };
        //单个商品被点击时 总是遍历所有单选
        //如果所有单选都被选中了,全选也要选中
        /**
         * 用JQ选择器 找出所有单选input
         * 放入数组 every遍历
         *  单选的checked值
         * 只有所有单选的checked的值为true(即所有单选都被选中了)
         * 才会返回true
         */
        let isAllChecked = [...$('.one')].every((ele, i) => {
            return $(ele).prop('checked')
        });
        $('#all').prop('checked', isAllChecked);



        let isChecked = $(this).prop('checked');
        //当前商品的小计
        let xiaojiNow = parseInt($(this).parent().parent().find('.xiaoji').text());
        if (isChecked) {
            allMoney += xiaojiNow;
            $('.allmoney').text(allMoney);
        } else {
            allMoney -= xiaojiNow;
            $('.allmoney').text(allMoney);
        }
    });

    //删除键操作
    //新思路:点击删除键后动态创建删除确认框
    let isAppended = false;
    $('.remove').on('click', function () {
        //如果没有创建
        if (!isAppended) {
            $(this).append(`
            <div class="comfirm">
                <div class="triangle"></div>
                <div class="yes">是</div>
                <div class="no">否</div>
            </div>
            `);
            //一旦创建过确认框,isAppended为true
            isAppended = true;
            $('.yes').on('click', function () {
                //如果用parents('.scitem')获取,会获取到所有的商品
                //所以只能一直parent()
                let $item = $(this).parent().parent().parent().parent().parent();
                let isChecked = $item.find('.one').prop('checked');
                //在移除之前判断,此商品是否被勾选计入总价计算
                //如果被勾选,移除之前
                //总价要减掉此商品的小计
                if (isChecked) {
                    let thisXiaoji = parseInt($item.find('.xiaoji').text());
                    allMoney = allMoney - thisXiaoji;
                    $('.allmoney').text(allMoney);
                }

                $item.remove();
                //整个产品移除了,所以确认框也会被移除
                //因为确认框移除了,所以确认框是否创建改为false
                isAppended = false;
                return false
            });
            $('.no').on('click', function () {
                $(this).parent().remove()
                console.log($(this).parent());
                //因为确认框移除了,所以是否创建改为false
                isAppended = false;
                return false
            });
        };
        return false
    })
});

//如果登录过显示用户名
$(function () {
    let $ul = $('.hr>ul');
    let $signedin = $('.signedin');
    if (window.localStorage.userinfo) {
        let username = JSON.parse(window.localStorage.userinfo)[0].u_name;
        $signedin.remove();
        $ul.prepend(`
        <li class="quit">
            <a href="javascript:;">${username} </a>
            <a href="javascript:;"> 退出</a>
        </li>
        `);
        $('.quit').children().eq(1).on('click', function () {
            layer.msg('已退出登录');
            localStorage.removeItem('userinfo');
            $(this).parent().parent().prepend(`
            <li class="signedin">
                <a href="./login.html">请登录 </a>
                <a href="./register.html"> 注册</a>
            </li>
            `);
            $(this).parent().remove();
            console.log($(this).parent().parent());
        })
    };
})